<template>
  <div style="height: 100%;overflow:scroll;font-size: 14px;background-color: #f5f5f5;">
    <header>
      <div>
        <div class="header">
          <div class="user_content">
            <div class="logoContent show_logo_content">
              <a class="header_logo_goHome" @click="homePage">
                <img id="all_top_icon" src="../../../public/img/5d811034-b989-43a5-98cc-82df4bace7de.png"
                  style="height:49px;margin-top:-6px;">
              </a>
              <p id="all_top_title" style="margin-left:12px">购物车</p>
            </div>
            <div class="userinfo login" style="display: block;">
              <a class="header_goHome" @click="homePage">
                <span class="toIndex">
                  返回首页
                </span>
              </a>
              <span v-if="userInfo && userInfo.id">|</span>
              <a href="/#/info" v-if="userInfo && userInfo.id" class="header_goUser">
                <span class="username">{{ userInfo.nickname }}</span>
              </a>
              |
              <a class="header_order">
                <span class="order">
                  我的订单
                </span>
              </a>|
              <span class="logout" @click="logoutFun">退出</span>
              <!-- <span class="logout" v-if="!userInfo || !userInfo.id" @click="loginPage">登录</span> -->
            </div>
          </div>
        </div>

      </div>
    </header>

    <div id="cart_pc_wrapper">

      <div class="main">
        <!-- 未登录提示 Start -->
        <!-- <div v-if="!userInfo || !userInfo.id" class="unlogin_wrapper">
          <span class="unlogin_icon">
            <i class="iconfont icon-prompt-fill"></i>
          </span>
          <span class="unlogin_text">您还没有登录！登录后购物车的商品将保存到您账户中</span>
          <button class="le_btn le_btn_solid le_button_login" @click="loginPage">立即登录</button>
        </div> --><!-- 未登录提示 End -->
        <!--购物车为空 Start-->
        <div class="cart_empty" tag="hasNoCount" style="display: none;">
          <dl class="clearfix">
            <dt class="fl">
              <img src="../../../public/img/nz4khhca89tqwb9x9bpa99zj6619c1027055.png">
            </dt>
            <dd class="fl">
              <ul>
                <li class="message">您的购物车空空如也，赶快选购吧～</li>
                <li class="btn_group">
                  <button class="le_btn le_btn_solid le_button_login" @click="loginPage">登录</button>
                  <button class="le_btn le_btn_border le_button_gohome" @click="homePage">去逛逛</button>
                </li>
              </ul>
            </dd>
          </dl>
        </div>
        <!--购物车为空 End-->
        <div class="cart_wrap">
          <div class="shipping-area-container clearfix" id="container_ShippingAddress">
            <div class="business-totalgoods">全部商品<!-- <span>{{totalNum}}</span> -->
            </div>
          </div><!-- 商品列表头部 Start -->
          <div class="clearfix cart_thead">
            <div class="le_width_116 t-checkbox selectAll">
              <el-checkbox v-model="allChecked" @change="selectAll">全选</el-checkbox>
            </div>
            <div class="t-goods">商品</div>
            <div class="le_width_172 t-price">单价</div>
            <div class="le_width_172 t-quantity">数量</div>
            <div class="le_width_172 t-sum">小计</div>
            <div class="le_width_116 t-action">操作</div>
          </div><!-- 商品列表头部 End -->
          <div class="good_list">
            <div v-for="(item, index) in cartList" :key="index" class="good_item testcls">
              <!-- Header -->
              <div class="good_item_head_box  active headerbox"></div>
              <div class="good_item_content">
                <div class="content_item active">
                  <div class="good_main">
                    <!-- 主品 -->
                    <div class="mainSku">
                      <!-- checkbox -->
                      <div class="clearfix form">
                        <div class="fl i_checkbox">
                          <el-checkbox v-model="item.checked" @change="selected(item)"></el-checkbox>
                        </div>
                        <div class="fl i_checkboxs">
                        </div>
                        <!-- img -->
                        <div class="fl i_img">
                          <a href="https://item.lenovo.com.cn/product/1029368.html" target="_blank">
                            <img class="mainsku_thumbnail_img" :src="'api/' + item.product.image" alt="">
                          </a>
                        </div>
                        <!-- MainSku desc -->
                        <div class="fl i_desc">
                          <h3 style="opacity:1;" @click="productDetail(item)">
                            <a class="goods_selltype">{{ item.product.name }}</a>
                          </h3>
                        </div>
                        <!-- 价格 -->
                        <div class="fl le_width_172 i_price">
                          <p style="opacity:1;visibility:visible;" class="le_paddingl_31">
                            <span>￥{{ item.product.price }}</span>
                          </p>

                        </div>
                        <!-- 数量 -->
                        <div class="fl le_width_172 i_quantity" style="opacity:1;">
                          <p class="le_num_action">
                            <input type="button" value="-" class="reduce" @click="subNum(item)">
                            <input class="num" tag="mainsku_count" leblur="onBlurCount" v-model="item.quantity"
                              type="text">
                            <input type="button" value="+" class="add" @click="addNum(item)">
                          </p>
                          <p class="le_color_red limit_tip"></p>
                        </div>
                        <!-- 小计 -->
                        <div class="fl le_width_172 i_sum">
                          <p style="opacity:1;visibility:visible;" class="le_paddingl_65">
                            <span>¥<span tag="mainsku_totalprice">{{ item.product.price * item.quantity }}</span>
                            </span>
                          </p>
                        </div>
                        <!-- 操作 -->
                        <div class="fl le_width_116 i_action" style="visibility:visible">
                          <button>移入收藏夹</button>
                          <button @click="delCartSingle(index)">删除</button>
                        </div>
                      </div>
                    </div>
                    <!-- 主品附属商品 -->
                    <div class="extra extraCls"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="cart_settlement_box" tag="hasCount" style="width: 1200px;">
          <div class="cart_settlement">
            <div class="settlement_box">
              <!-- <div class="fl action">
                <ul>
                  <li class="selectAll">
                    <el-checkbox v-model="allChecked" @change="selectAll">全选</el-checkbox>
                  </li>
                  <li>
                    <button id="deleteAllbtn" @click="delCartAll">删除</button>
                  </li>
                  <li>
                    <button id="deletefailurebtn">清空失效商品</button>
                  </li>
                  <li>
                    <button id="movetofavbtn">移入收藏夹</button>
                  </li>
                </ul>
              </div> -->
              <button class="fr settlement" id="gocheckout" @click="toPay">去结算</button>
              <div class="fr price_box">
                <div class="sum_box" style="line-height: 50px;">实付款：<span
                    class="sum ptotalprefix">¥{{ totalPrice.toFixed(2) }}</span>
                  <span class="le_color_red ptotalsuffix"></span>
                </div>
              </div>
              <div class="fr good_num">已选择<span class="le_color_red ptotalcount">{{ totalNum }}</span>件</div>
            </div>
          </div>
        </div>

        <!-- <div id="cart_recommend_segment">
          <div class="_rcmd_container">
            <div class="clearfix _rcmd_title">
              <span class="_rcmd_decorate"></span>
              <span class="_rcmd_tip">为你推荐</span>
            </div>
            <div class="clearfix _rcmd_area">
              <div id="_rcmd_hot">
                <ul class="clearfix">
                  <li v-for="(item,index) in recommendList" :key="index" class="_rcmd_good" @click="productDetail(item)">
                    <div class="_rcmd_good_tumb_c">
                      <a>
                        <img :src="item.cover" class="_rcmd_good_tumb">
                      </a>
                    </div>
                    <span class="_rcmd_good_name">{{item.productName}}</span>
                    <span class="_rcmd_good_price">￥{{item.price}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div> -->

      </div>

    </div>

  </div>
</template>

<script>
import api from '@/api/';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      userInfo: {},
      allChecked: true,//全部选中
      totalNum: 0,
      totalPrice: 0,
      cartList: [
        {
          id: 6, productName: '联想小新Pro14 2023英特尔酷睿i5 14英寸轻薄笔记本电脑 鸽子灰',
          des: '第13代智能英特尔® 酷睿™ i5-13500H/Windows 11 家庭中文版/14英寸/32GB/1T SSD/集成显卡/鸽子灰',
          price: 6299,
          checked: true,
          num: 1,
          cover: require('../../../public/img/knUF2BaGGRQat2RbPBEJYzXN4-5579.jpg'),
          imgList: [
            require('../../../public/img/XTvcWaCf29MTC2SFOSW2fV9RS-2939.jpg'),
            require('../../../public/img/QAzTExsVTx3ialBVZtALls8U4-5557.jpg'),
            require('../../../public/img/knUF2BaGGRQat2RbPBEJYzXN4-5579.jpg'),
            require('../../../public/img/W6d3BDNuaVr9PW6hu34Jz7Gfy-6568.jpg'),
            require('../../../public/img/p7dRyKcQlgtRXg3vSfvMxoh8q-9424.jpg'),
            require('../../../public/img/Q988RRMJGvzXsS4Yl0xMtfdu7-9453.jpg'),
            require('../../../public/img/f2nKZzx1OMaFiXiHYIlPjQDld-9470.jpg'),
            require('../../../public/img/SrRWO60htt9FKBXwXB2KyTaGP-9681.jpg')
          ],
          detailImgList: [//详情图片列表
            require('../../../public/img/CzI5QGjkRxyFtloNvI3kOZNiP-8477.jpg'),
            require('../../../public/img/F7pAbFtMSzEQWeOqPnnFKXbZT-3974.jpg'),
            require('../../../public/img/j9Kp8c4wTLFmHAprl6x4t55XE-9849.jpg'),
            require('../../../public/img/ByIoqf3sDqjdLpD4HOiAoCCXz-5940.jpg'),
            require('../../../public/img/n3XxKFBREGM85FD14tcKfCPXL-6896.jpg')
          ]
        },
        {
          id: 7, productName: '联想小新Pro16超能本2023酷睿版 16英寸轻薄笔记本电脑 鸽子灰',
          des: '第13代智能英特尔® 酷睿™ i5-13500H/Windows 11 家庭中文版/16英寸/32GB/1T SSD/RTX 4050 6G 独显/鸽子灰',
          price: 8999,
          checked: true,
          num: 1,
          cover: require('../../../public/img/L1Fknd8OIlpPBJU7ymLhFyyg3-5615.jpg'),
          imgList: [
            require('../../../public/img/L1Fknd8OIlpPBJU7ymLhFyyg3-5615.jpg'),
            require('../../../public/img/PC2kZhfwGz83JkNLGZa6qbqDf-5601.jpg'),
            require('../../../public/img/Ad8qaOw061UhoGbIFnMPesI93-2219.jpg'),
            require('../../../public/img/sYA3doEFvG64YITTiQf26ymJa-2182.jpg'),
            require('../../../public/img/W3ag4Bha8iSqcjdF4rNgTTQdA-2211.jpg')
          ],
          detailImgList: [//详情图片列表
            require('../../../public/img/CzI5QGjkRxyFtloNvI3kOZNiP-8477.jpg'),
            require('../../../public/img/F7pAbFtMSzEQWeOqPnnFKXbZT-3974.jpg'),
            require('../../../public/img/j9Kp8c4wTLFmHAprl6x4t55XE-9849.jpg'),
            require('../../../public/img/ByIoqf3sDqjdLpD4HOiAoCCXz-5940.jpg'),
            require('../../../public/img/n3XxKFBREGM85FD14tcKfCPXL-6896.jpg')
          ]
        },
      ],
      recommendList: []
    };
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  async mounted() {
    const resultuser = await api.get("api/user/userinfo");
    this.userInfo = resultuser.data;
    //自己的代码
    const result = await api.get("api/cart/");

    this.cartList = result.data;
    this.cartList.forEach((item) => {
      if (item.selected == 0) {
        item.checked = false;
        this.allChecked = false;
      } else {
        item.checked = true;
      }
    });
    this.total();
    console.log(this.cartList);


    // this.initCart();
    // data.products.forEach((item) => {
    //   if(this.recommendList.length < 4){
    //     this.recommendList.push(item);
    //   }
    // })
    // //全选处理
    // this.cartList.map((item) => {
    //       this.checked = true;
    //       item.checked = true;
    //       item.selected=1;

    //     })
  },
  methods: {
    homePage() {//首页
      this.$router.push({ path: '/' });
    },
    loginPage() {//登录注册
      this.$router.push({ path: '/login' });
    },
    //初始化购物车
    initCart() {
      this.total();
    },
    //统计
    total() {
      this.totalNum = 0;
      this.totalPrice = 0
      this.cartList.forEach((item) => {
        item.checked ? (this.totalNum += item.quantity) : (this.totalNum += 0)
        item.checked ? (this.totalPrice += item.quantity * item.product.price) : (this.totalPrice += 0);
      })
    },
    //缓存购物车
    saveCarToStorage() {
      this.total();
    },
    //删除购物车商品 - 单个
    delCartSingle(index) {
      this.$confirm('确定删除?', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.cartList.length > index) {
            const id = this.cartList[index].id;
            //删除
            api.del("api/cart/", id);
            this.cartList.splice(index, 1);
            //计算合计
            this.saveCarToStorage();
            this.$message.success('删除成功');
          }
        });
    },
    //删除购物车商品 - 全部
    delCartAll() {
      this.$confirm('确定删除选中的商品?', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.cartList.forEach((item, index) => {
            if (item.checked) {
              this.cartList.splice(index, 1);
            }
          })
          this.$message.success('删除成功');
          this.initCart();
        });
    },
    //商品详情
    productDetail(item) {
      console.info(item);
      this.$router.push({
        path: '/productDetail',
        query: {
          id: item.id
        }
      })
    },
    //勾选商品
    selected(item) {
      //将item.checked发送到后台
      item.selected = 1;
      if (!item.checked) {
        this.allChecked = false;
        item.selected = 0;
      } else {
        let allChecked = true;
        this.cartList.forEach((item) => {
          if (!item.checked) {
            allChecked = false;
          }
        })
        this.allChecked = allChecked;
      }
      this.total();
      api.putForm("api/cart/select", item);
    },
    //全选
    selectAll() {
      if (this.allChecked) {
        this.cartList.map((item) => {
          this.checked = true;
          item.checked = true;
          item.selected = 1;
          api.putForm("api/cart/select", item);
        })
      } else {
        this.checked = false;
        this.cartList.map((item) => {
          item.checked = false;
          item.selected = 0;
          api.putForm("api/cart/select", item);
        })
      }
      this.total();
    },
    //商品数量减
    subNum(item) {
      let num = item.quantity;
      if (num > 1) {
        num -= 1
      }
      item.quantity = num;
      //存到缓存
      this.saveCarToStorage();
      api.putForm("api/cart/", item);
    },
    //商品数量加
    addNum(item) {
      let num = item.quantity;
      item.quantity = num + 1;
      //存到缓存
      this.saveCarToStorage();
      api.putForm("api/cart/", item);
    },
    //结算
    toPay() {
      let products = "";
      this.cartList.forEach((item) => {

        if (item.checked) {
          // products.push({
          //   productid:item.id,
          //   quantity:item.quantity
          // });
          if (products) {
            //"123_34,456_5,567_9"
            products = products + ",";
          }
          products = products + item.product.id + "_" + item.quantity;
        }
      });
      this.$router.push({
        path: '/pay',
        query: {
          // value: value
          products: products
        }
      })
    },
    async logoutFun() {//退出登录
      this.$confirm("确定退出登录?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const result = await api.postForm("/api/user/loginout");
          sessionStorage.removeItem("Authorization")
          this.$notify({
            title: '提示',
            message: '退出成功',
            type: 'success'
            //duration: 0//为0则不会自动关闭
          });
          //清除用户信息缓存

          this.$router.push({ path: '/' });
        })
    }
  }
};
</script>
<style scoped>
.header {
  margin: 0 auto;
  padding-top: 0px;
  background: #f9f9f9;
  height: 50px;
  line-height: 48px;
  border-bottom: solid 1px #d2d2d2;
}

.user_content {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}

.logoContent {
  float: left;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: #000;
}

a {
  text-indent: 0px;
  cursor: pointer;
}

.logoContent p,
.logoContent img {
  display: inline-block;
}

.logoContent img {
  vertical-align: middle;
}

img {
  max-width: 100%;
  max-height: 100%;
}

img,
fieldset,
input {
  border: 0;
  outline: transparent;
}

.logoContent p,
.logoContent img {
  display: inline-block;
}

.logoContent p {
  font-size: 20px;
  line-height: 48px;
}

ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.userinfo {
  float: right;
}

.userinfo span {
  padding: 0 5px;
  cursor: pointer;
}

#cart_pc_wrapper {}

#cart_pc_wrapper {
  min-height: 85%;
}

#cart_pc_wrapper .main {
  width: 1200px;
  margin: 15px auto;
}

#cart_pc_wrapper .unlogin_wrapper {
  background: #FFF4F3;
  border-radius: 2px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #FF2F2F;
  margin-bottom: 10px;
}

#cart_pc_wrapper .unlogin_wrapper .unlogin_icon {
  margin-left: 34px;
  vertical-align: middle;
}

#cart_pc_wrapper .unlogin_wrapper .unlogin_icon i {
  font-size: 18px;
  color: #FF4948;
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

#cart_pc_wrapper .unlogin_wrapper .unlogin_text {
  margin-left: 4px;
  margin-right: 10px;
}

#cart_pc_wrapper .unlogin_wrapper button {
  width: 78px;
  height: 28px;
  line-height: 28px;
  font-size: 13px;
}

.le_btn_solid {
  color: #ffffff;
  background: #E1140A;
}

.le_btn {
  border-radius: 4px;
  cursor: pointer;
}

button,
input,
select,
textarea {
  border-style: none;
}

button {
  outline: transparent;
  border: 0;
}

html,
body,
p,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
input,
select,
textarea,
button,
th,
td {
  margin: 0;
  padding: 0;
}

#cart_pc_wrapper .cart_empty dl {
  padding: 132px 0 121px 345px;
}

.clearfix {
  zoom: 1;
}

ul,
dl,
ol,
li {
  list-style: none;
}

.fl {
  float: left;
}

#cart_pc_wrapper .cart_empty dl dt img {
  width: 150px;
  height: 100px;
}

img {
  max-width: 100%;
  max-height: 100%;
}

#cart_pc_wrapper .cart_empty dl dd {
  padding-top: 22px;
}

ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

#cart_pc_wrapper .cart_empty dl dd .message {
  font-size: 20px;
  color: #454545;
}

#cart_pc_wrapper .cart_empty dl dd .btn_group {
  margin-top: 8px;
}

#cart_pc_wrapper .cart_empty dl dd .btn_group .le_btn_solid {
  height: 36px;
  line-height: 36px;
  border: 1px #E1140A solid;
}

.le_btn_solid {
  color: #ffffff;
  background: #E1140A;
}

.le_btn {
  width: 100px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.le_btn_border {
  border: 1px solid #E1140A;
  color: #E1140A;
  height: 36px;
  line-height: 36px;
}

#container_ShippingAddress {
  position: relative;
}

.shipping-area-container {
  margin: 0;
  padding-left: 35px;
  height: 37px;
  color: #434242;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.shipping-area-container .business-totalgoods {
  font-size: 14px;
  font-weight: 600;
  color: #ef1e0b;
  width: 150px;
  float: left;
  line-height: 30px;
}

#cart_pc_wrapper .cart_wrap .cart_thead {
  padding-right: 35px;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  text-align: center;
  background: #FFFFFF;
  border-radius: 4px;
  font-weight: bold;
}

#cart_pc_wrapper .cart_wrap .cart_thead .t-checkbox {
  text-align: left;
  text-indent: 10px;
}

#cart_pc_wrapper .cart_wrap .cart_thead>div {
  float: left;
}

.le_width_116 {
  width: 116px;
}

#cart_pc_wrapper .cart_wrap .cart_thead .t-goods {
  width: 417px;
}

#cart_pc_wrapper .cart_wrap .cart_thead>div {
  float: left;
}

#cart_pc_wrapper .cart_wrap .cart_thead .t-price {
  text-align: left !important;
  text-indent: 31px;
}

#cart_pc_wrapper .cart_wrap .cart_thead>div {
  float: left;
}

.le_width_172 {
  width: 172px;
}

.le_width_116 {
  width: 116px;
}

#cart_pc_wrapper .cart_wrap .good_list .good_item {
  background: #FFFFFF;
  border-radius: 4px;
  margin-top: 6px;
}

#cart_pc_wrapper .cart_wrap .good_list .good_item .good_item_head_box.active {
  background: #FFF8F4;
}

#cart_pc_wrapper .cart_wrap .good_list .good_item .good_item_head_box {
  padding: 0 35px;
}

#cart_pc_wrapper .content_item {
  text-align: left;
}

#cart_pc_wrapper .content_item.active .good_main {
  background: #FFF8F4;
}

#cart_pc_wrapper .content_item .good_main {
  padding: 23px 35px 17px 35px;
}

#cart_pc_wrapper .i_checkbox {
  width: 16px;
  height: 16px;
  margin: 44px 12px 0 0;
}

#cart_pc_wrapper .i_img {
  position: relative;
}

#cart_pc_wrapper .i_img img {
  width: 110px;
  height: 110px;
  vertical-align: middle;
}

#cart_pc_wrapper .i_desc {
  width: 346px;
  text-align: left;
  padding-left: 14px;
}

#cart_pc_wrapper .i_desc h3 {
  font-size: 14px;
}

#cart_pc_wrapper .i_desc h3 a {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

#cart_pc_wrapper .content_item .good_main .i_price {
  font-size: 14px;
}

.le_paddingl_31 {
  padding-left: 31px;
}

#cart_pc_wrapper .i_quantity {
  text-align: center;
}

.le_num_action {
  display: inline-block;
  border: 1px solid #E0E0E0;
  background-color: #ffffff;
}

ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.le_num_action input[type='button'] {}

.le_num_action input:disabled {
  color: #E0E0E0;
  opacity: 1;
  -webkit-text-fill-color: #E0E0E0;
}

.le_num_action .reduce {
  border-right: 1px solid #E0E0E0;
}

.le_num_action .reduce,
.le_num_action .add {
  width: 27px;
  cursor: pointer;
  font-size: 18px;
}

.le_num_action input {
  display: inline-block;
  text-align: center;
  height: 27px;
}

.le_num_action .num {
  width: 48px;
}

.le_num_action input {
  display: inline-block;
  text-align: center;
  color: #454545;
  height: 27px;
}

.le_num_action .add {
  border-left: 1px solid #E0E0E0;
}

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

#cart_pc_wrapper .content_item .good_main .i_sum {
  font-size: 14px;
  font-weight: bold;
}

.le_paddingl_65 {
  padding-left: 65px;
}

.le_width_116 {
  width: 116px;
}

#cart_pc_wrapper .i_action button {
  display: block;
  margin-left: 26px;
  cursor: pointer;
  font-size: 13px;
  color: #454545;
}

#cart_pc_wrapper .i_desc h3 a:hover {
  color: #E1140A;
}

#cart_pc_wrapper .i_action button:hover {
  color: #E1140A;
}

#cart_pc_wrapper .cart_settlement_box {
  height: 60px;
  margin: 0 auto;
  margin-bottom: 30px;
}

#cart_pc_wrapper .cart_settlement {
  height: 60px;
  background: #ffffff;
}

#cart_pc_wrapper .cart_settlement .settlement_box {
  width: 1200px;
  margin: 0 auto;
  text-align: right;
}

#cart_pc_wrapper .cart_settlement .settlement_box .action {
  line-height: 60px;
  padding-left: 36px;
  font-size: 14px;
}

#cart_pc_wrapper .cart_settlement .settlement_box .action li.selectAll {
  cursor: pointer;
}

#cart_pc_wrapper .cart_settlement .settlement_box .action li {
  float: left;
  margin-right: 30px;
}

#cart_pc_wrapper .cart_settlement .settlement_box .action li.selectAll i {
  margin-right: 25px;
  display: inline-block;
  margin-top: -2px;
}

#cart_pc_wrapper .cart_settlement .settlement_box .action li {
  float: left;
  margin-right: 30px;
}

#cart_pc_wrapper .cart_settlement .settlement_box .action li button {
  font-size: 14px;
}

#cart_pc_wrapper .cart_settlement .settlement_box .action button {
  cursor: pointer;
}

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

#cart_pc_wrapper .cart_settlement .settlement_box button.settlement {
  background: #E1140A;
  width: 195px;
  height: 60px;
  line-height: 60px;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
}

#cart_pc_wrapper .cart_settlement .settlement_box .price_box {
  padding: 7px 15px 0 61px;
  font-size: 12px;
  text-align: left;
}

#cart_pc_wrapper .cart_settlement .price_box .sum_box span.sum {
  font-size: 22px;
  color: #E1140A;
  padding-left: 6px;
  font-weight: bold;
}

#cart_pc_wrapper .cart_settlement .price_box .sum {
  line-height: 28px;
}

#cart_pc_wrapper .cart_settlement .price_box .sum_box .ptotalsuffix {
  font-weight: bold;
}

.le_color_red {
  color: #E1140A;
}

#cart_pc_wrapper .cart_settlement .settlement_box .good_num {
  margin-top: 15px;
  height: 30px;
  line-height: 30px;
  border-right: 1px solid #E0E0E0;
  padding-right: 24px;
  font-size: 14px;
}

.le_color_red.ptotalcount {
  font-weight: bold;
  margin: 0 4px;
}

.le_color_red {
  color: #E1140A;
}

.fr {
  float: right;
}

#cart_pc_wrapper #cart_recommend_segment {
  width: 100%;
  margin-bottom: 14px;
}

#cart_pc_wrapper #cart_recommend_segment div._rcmd_container {
  background-color: #ffffff;
  border-radius: 4px;
  margin: auto;
  width: 1200px;
  display: block;
  position: relative;
}

#cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title {
  font-size: 22px;
  line-height: 22px;
  width: 100%;
  padding-top: 28px;
}

#cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title span._rcmd_decorate {
  margin: 9px 8px 0px 28px;
  display: block;
  float: left;
  background: #FF2F2F;
  border-radius: 2px;
  width: 3px;
  height: 22px;
}

#cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_title span._rcmd_tip {
  display: block;
  float: left;
  margin: 8px 0px 0px 0px;
  font-weight: 600;
}

#cart_pc_wrapper #cart_recommend_segment div._rcmd_container div._rcmd_area {
  width: 100%;
  background-color: #ffffff;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot {
  width: 90%;
  height: fit-content;
  margin: 0 auto;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot li._rcmd_good {
  width: 25%;
  height: 100%;
  float: left;
  padding-bottom: 44px;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot div._rcmd_good_tumb_c {
  padding: 15px;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot div._rcmd_good_tumb_c a {
  display: inline-block;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot img._rcmd_good_tumb {
  width: 100%;
  height: 100%;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span._rcmd_good_name {
  height: 40px;
  color: rgb(15, 15, 15);
  font-weight: 500;
  font-size: 13px;
  font-family: 微软雅黑;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  line-height: 20px;
  padding: 0px 15px;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span {
  display: block;
  overflow: hidden;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span._rcmd_good_price {
  color: red;
  font-size: 14px;
  padding: 0px 15px 0px 15px;
}

#cart_pc_wrapper #cart_recommend_segment #_rcmd_hot span {
  display: block;
  overflow: hidden;
  font-weight: 600;
}

#cart_pc_wrapper #cart_recommend_segment ._dsp_off {
  display: none;
}
</style>
